<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ '编辑笔记' if action == 'edit' else '新建笔记' }} - 简易笔记应用</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>简易笔记应用</h1>
        </header>
        
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                        <div class="message">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        
        <!-- 笔记编辑表单 -->
        <div class="edit-section">
            <h2>{{ '编辑笔记' if action == 'edit' else '新建笔记' }}</h2>
            
            {% if action == 'edit' and note %}
                <div class="note-meta">
                    <span class="note-date">创建于: {{ note[3] }}</span>
                    {% if note[3] != note[4] %}
                        <span class="note-updated">更新于: {{ note[4] }}</span>
                    {% endif %}
                </div>
            {% endif %}
            
            <form method="POST" action="{{ url_for('edit_note', note_id=note[0]) if action == 'edit' else url_for('new_note') }}">
                <div class="form-group">
                    <label for="title">笔记标题</label>
                    <input type="text" id="title" name="title" value="{{ note[1] if note else '' }}" placeholder="请输入笔记标题" required>
                </div>
                
                <div class="form-group">
                    <label for="content">笔记内容 (支持Markdown格式)</label>
                    <textarea id="content" name="content" rows="20" placeholder="请输入笔记内容（支持Markdown语法）" required>{{ note[2] if note else '' }}</textarea>
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="save-btn">{{ '保存修改' if action == 'edit' else '创建笔记' }}</button>
                    <a href="{{ url_for('view_note', note_id=note[0]) if action == 'edit' else url_for('index') }}" class="cancel-btn">取消</a>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 添加消息提示的自动消失效果
            const messages = document.querySelectorAll('.message');
            messages.forEach(message => {
                setTimeout(() => {
                    message.classList.add('fade-out');
                }, 3000);
            });
            
            // 自动聚焦到标题输入框
            document.getElementById('title').focus();
        });
    </script>
</body>
</html>